// 登录失效管理器
import { useTokenStore } from '@/stores/token.js'
import { useAdminStore } from '@/stores/admin.js'

class LoginExpiredManager {
  constructor() {
    this.isShowing = false
  }

  show() {
    // 防止重复显示
    if (this.isShowing) {
      return
    }
    
    this.isShowing = true
    
    // 清除token和用户信息
    const tokenStore = useTokenStore()
    const adminStore = useAdminStore()
    
    tokenStore.removeToken()
    adminStore.clearAdminInfo()
    
    // 显示登录失效提示
    this.showExpiredModal()
  }

  showExpiredModal() {
    // 创建弹窗元素
    const modal = document.createElement('div')
    modal.className = 'login-expired-modal'
    modal.innerHTML = `
      <div class="modal-overlay">
        <div class="modal-content">
          <div class="modal-header">
            <h3>登录已失效</h3>
          </div>
          <div class="modal-body">
            <p>您的登录状态已失效，请重新登录</p>
          </div>
          <div class="modal-footer">
            <button class="confirm-btn" onclick="window.loginExpiredManager.handleRelogin()">
              重新登录
            </button>
          </div>
        </div>
      </div>
    `
    
    // 添加样式
    const style = document.createElement('style')
    style.textContent = `
      .login-expired-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
      }
      
      .login-expired-modal .modal-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .login-expired-modal .modal-content {
        background: white;
        border-radius: 12px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        max-width: 400px;
        width: 90%;
        overflow: hidden;
      }
      
      .login-expired-modal .modal-header {
        padding: 20px 25px 15px;
        border-bottom: 1px solid #eee;
      }
      
      .login-expired-modal .modal-header h3 {
        margin: 0;
        color: #333;
        font-size: 18px;
      }
      
      .login-expired-modal .modal-body {
        padding: 20px 25px;
      }
      
      .login-expired-modal .modal-body p {
        margin: 0;
        color: #666;
        line-height: 1.5;
      }
      
      .login-expired-modal .modal-footer {
        padding: 15px 25px 20px;
        text-align: right;
      }
      
      .login-expired-modal .confirm-btn {
        background: #1890ff;
        color: white;
        border: none;
        padding: 8px 20px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        transition: background 0.3s ease;
      }
      
      .login-expired-modal .confirm-btn:hover {
        background: #40a9ff;
      }
    `
    
    // 添加到页面
    document.head.appendChild(style)
    document.body.appendChild(modal)
    
    // 存储引用以便后续清理
    this.modalElement = modal
    this.styleElement = style
  }

  handleRelogin() {
    // 清理弹窗
    if (this.modalElement) {
      document.body.removeChild(this.modalElement)
      this.modalElement = null
    }
    
    if (this.styleElement) {
      document.head.removeChild(this.styleElement)
      this.styleElement = null
    }
    
    // 重置状态
    this.isShowing = false
    
    // 跳转到登录页
    window.location.href = '/login'
  }
}

// 创建全局实例
const loginExpiredManager = new LoginExpiredManager()

// 挂载到window对象，方便在HTML中调用
window.loginExpiredManager = loginExpiredManager

export default loginExpiredManager
